<template>
	<view class="movie-detail-page" :style="{ backgroundColor: bg }">
		<view class="poster-container">
			<img :src="details.img" class="movie-poster" />
		</view>
		<view class="shipin">
			<video :src="details.videourl" controls></video>
		</view>
		<view class="detail-content">
			<view class="info-item">
				<text class="label">影片名：</text>
				<text class="value">{{ details.nm }}</text>
			</view>
			<view class="info-item">
				<text class="label">类别：</text>
				<text class="value">{{ details.cat }}</text>
			</view>
			<view class="info-item">
				<text class="label">导演：</text>
				<text class="value">{{ details.dir }}</text>
			</view>
			<view class="info-item">
				<text class="label">剧情简介：</text>
				<text class="value">{{ details.dra }}</text>
			</view>
			<view class="info-item">
				<text class="label">上映时间：</text>
				<text class="value">{{ details.pubDesc }}</text>
			</view>
			<view class="info-item">
				<text class="label">评分：</text>
				<text class="value">{{ details.sc }}</text>
			</view>
			<view class="info-item">
				<text class="label">想看人数：</text>
				<text class="value">{{ details.snum }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';

	import {
		onLoad
	} from "@dcloudio/uni-app"
	// import {
	// 	data
	// } from '../../utils/data';


	const details = ref({});
	const bg = ref("");
	onLoad((data) => {
		console.log(data.id)
		getDetails("0000" + data.movieId)
	})


	// 获取当前页面栈实例
	const pages = getCurrentPages();
	// 当前页面实例
	const currentPage = pages[pages.length - 1];
	// 当前页面的路由参数
	const options = currentPage.options;

	async function getDetails(movieId) {
		try {
			let res = await uni.$get("https://m.maoyan.com/ajax/detailmovie", {
				movieId: movieId
			});
			console.log(res);
			details.value = res.detailMovie;
			console.log(details.value);
			// 设计导航栏背景色
			uni.setNavigationBarColor({
				frontColor: "#ffffff", // 导航栏标题颜色，只能是'black'或'white'
				backgroundColor: details.value.backgroundColor // 导航栏背景颜色
			});
			// 获取页面背景色
			bg.value = details.value.backgroundColor;
			// 设计导航栏标题
			uni.setNavigationBarTitle({
				title: details.value.nm
			});
		} catch (error) {
			console.error("Error fetching movie details:", error);
		}
	}

	// onMounted(() => {
	//   const movieId = options.movieId; // 从页面参数中获取电影ID
	//   if (movieId) {
	//     getDetails(movieId);
	//   } else {
	//     console.warn("No movieId provided.");
	//   }
	// });
</script>

<style lang="scss" scoped>
	.movie-detail-page {
		padding: 10px;
		background-color: #f5f5f5;
		/* 亮色系背景 */
	}

	.poster-container {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-bottom: 10px;
	}

	.movie-poster {
		width: 200px;
		height: auto;
		border-radius: 8px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		/* 阴影效果 */
	}

	.detail-content {
		background-color: #fff;
		/* 亮白色背景 */
		padding: 20px;
		/* 增加内边距 */
		border-radius: 10px;
		/* 圆角边框 */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		/* 轻微阴影 */
		margin-bottom: 20px;
		/* 增加外边距 */
		font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
		/* 设置字体 */
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		/* 标签和值之间的间距 */
		margin-bottom: 15px;
		/* 增加间距 */
		padding: 10px 0;
		/* 增加上下内边距 */
		border-bottom: 1px solid #eaeaea;
		/* 底部边框 */
	}

	.info-item:last-child {
		border-bottom: none;
		/* 最后一个项目不显示底部边框 */
	}

	.label {
		font-size: 16px;
		/* 增加标签字体大小 */
		color: #333;
		/* 深灰色标签 */
		font-weight: 500;
		/* 增加字体权重 */
		width: 80px;
		/* 增加宽度 */
	}

	.value {
		font-size: 16px;
		/* 增加值字体大小 */
		color: #333;
		/* 深灰色值 */
		font-weight: 400;
		/* 正常字体权重 */
	}

	.shipin {
		width: 100%;
		margin-top: 10px;

		video {
			width: 100%;
			border-radius: 8px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
			/* 阴影效果 */
		}
	}
</style>